<template>
	<view class="container">
		<!-- 标题导航 -->
		<view class="profile-container">
			<view class="profile-header">
				<uni-icons type="left" size="20" @click='back'></uni-icons>
				<image class="profile-avatar" src="/static/2.svg"></image>
				<text class="profile-name">北京大表姐儿</text>
				<button class="profile-message">
					<uni-icons type="chat" size="15"></uni-icons>
					发私信</button>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="swiper-container">
			<swiper :autoplay="true" :interval="3000" :duration="500" :circular="true" :indicator-dots="true"
				:indicator-color="'#999'" :indicator-active-color="'#333'">
				<swiper-item v-for="(item, index) in images" :key="index">
					<image :src="item" class="swiper-image"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 定位 -->
		<view class="location-container">
			<view class="location-item">
				<div class="locationTb">
					<uni-icons type="location" size="20" color="white"></uni-icons>
				</div>
				<text class="location-text">故宫博物馆</text>
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>
		<!-- 标题 -->
		<text class="title">别再瞎逛故宫了，去过100次的土著攻略</text>
		<p class="diDu">在帝都北京生活了这么多久了，每年还是总会去
			<uni-icons type="location" size="15" color="skyblue">故宫</uni-icons>打卡好几次。
		</p>
		<p>春天的樱花雨~～～~夏天里的艳阳天～～～～秋日满地飘落的银杏～～～～冬天初雪那一天必须要去故宫许愿。</p>
		<p>但是如果你没有来过北京，那真的可以好好把表姐这一篇看完，因为故宫真的太大了，如果没有人带着你或者不提前做好攻略，真的是迷路加分分钟走到哭。</p>
		<p>大表姐就把我经常去故宫的几条路线和大家分享一下，经过我多年用脚步丈量故宫的经验，这一条真的还不错：</p>
		<p class="xiangQing" v-show="isExpanded">
			故宫的游客高峰期通常是上午10点到下午2点。如果你希望享受更安静的游览体验，建议选择早上开门后（8:30）或下午3点后进入。早上可以欣赏到故宫在晨光中的宁静之美，下午则能避开大部分团队游客。
		</p>
		<div class="jieShao">
			<p class="gaoNeng">【高能预警】浏览路线用时约4小时</p>
			<div class="zhanKai" @click="toggleExpand" v-show="!isExpanded">
				展开
				<uni-icons type="down" size="10" color="black"></uni-icons>
			</div>
		</div>
		<p class="p1">2098/11/20发布</p>
		<p class="p1">来自北京</p>
		<!-- 图文混排 -->
		<div class="tuWen">
			<view class="attraction">
				<image class="attraction-image" src="/static/3.svg"></image>
				<view class="attraction-info">
					<text class="attraction-name">故宫博物馆</text>
					<text class="attraction-level">5A</text>
					<text class="attraction-score">
						<span class="pf">4.8分</span>137532人评价
					</text>
					<text class="attraction-address">北京市东城区景山前街4号</text>
					<button class="view-button1" >去看看</button>
				</view>
			</view>
		</div>
		<div class="tuWen">
			<view class="attraction">
				<image class="attraction-image" src="/static/4.svg"></image>
				<view class="attraction-info">
					<text class="attraction-name">天安门广场</text>
					<text class="attraction-level">4A</text>
					<text class="attraction-score">
						<span class="pf">4.7分</span>
						17532人评价
					</text>
					<text class="attraction-address">北京市东城区长安街（天安门和正阳...</text>
					<button class="view-button2" @click="goBack">去看看</button>
				</view>
			</view>
		</div>
		<!-- 点赞 -->
		<view class="like-container">
			<view class="avatars">
				<image v-for="(avatar, index) in avatars" :key="index" :src="avatar" class="avatar-image"></image>
			</view>
			<view class="likes">
				<text class="like-icon">
					<uni-icons type="hand-up" size="20" color="red"></uni-icons>
				</text>
				<text class="like-count">20</text>
			</view>
		</view>
		<p>评论</p>
		<!-- 评论列表 -->
		<view class="comment">
			<view class="comment-header">
				<image class="avatar" src="/static/5.svg"></image>
				<view class="info">
					<text class="username">五行缺钱</text>
					<text class="date">2098-11-25 来自北京</text>
				</view>
			</view>
			<view class="comment-content">
				<text>线路设计的非常好，谢谢分享</text>
			</view>
		</view>
		<p class="p2">
			<uni-icons type="hand-up" size="20"></uni-icons>
		</p>
		<view class="comment">
			<view class="comment-header">
				<image class="avatar" src="/static/7.svg"></image>
				<view class="info">
					<text class="username">颖****觉</text>
					<text class="date">2098-11-20来自上海</text>
				</view>
			</view>
			<view class="comment-content">
				<text>这份攻略太好了，收藏了，正好元旦准备去故宫</text>
			</view>
		</view>
		<p class="p3">
			<uni-icons type="hand-up" size="20"></uni-icons>
			32
		</p>
		<!-- 更多评论 -->
		<p class="p4">查看全部5条评论></p>
		<!-- 聊天框布局 -->
		<view class="comment-bar" v-show="!isCommentBarActive">
			<div class="inputBox">
				<image src="/static/13.png" mode="" class="bi"></image>
				<input class="comment-input" placeholder="写评论..." @focus="showCommentBar1" />
			</div>
			<view class="actions">
				<view class="action-item">
					<uni-icons type="hand-up" size="20"></uni-icons>
					<text>20</text>
				</view>
				<view class="action-item">
					<uni-icons type="chat" size="20"></uni-icons>
					<text>5</text>
				</view>
				<view class="action-item">
					<uni-icons type="redo" size="20"></uni-icons>
					<text class="zi">分享</text>
				</view>
				<view class="action-item">
					<uni-icons type="heart" size="20"></uni-icons>
					<text class="zi">收藏</text>
				</view>
			</view>
		</view>

		<!-- 点击输入框后显示的聊天框 -->
		<view class="comment-input-bar1" v-show="isCommentBarActive">
			<div class="inputBox1">
				<input class="comment-input1" placeholder="说点什么吧..." />
			</div>
			<button class="send-button1" @click="sendComment">发送</button>
		</view>

		<!-- 公开昵称 -->
		<view class="option-bar1" v-show="isCommentBarActive">
			<checkbox class="checkbox1" checked="true">公开昵称</checkbox>
			<view class="icons1">
				<button class="icon-button1" @click="mentionUser">
					<uni-icons type="image" size="30"></uni-icons>
				</button>
				<button class="icon-button1" @click="mentionUser">
					<text class="iconfont icon-at">@</text>
				</button>
				<button class="icon-button1" @click="toggleEmojiPicker">
					<text class="iconfont icon-emoji">😊</text>
				</button>
			</view>
		</view>
		<!-- 表情包 -->
		<view class="emoji-picker" v-show="isEmojiPickerActive">
			<view class="emoji-grid">
				<block v-for="(emoji, index) in emojis" :key="index">
					<text class="emoji-item" @click="selectEmoji(emoji)">{{ emoji }}</text>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ref
	} from "vue";
	
	export default {
		setup() {
			const isCommentBarActive = ref(false);
			const isEmojiPickerActive = ref(false); // 控制表情选择器的显示
			const commentText = ref(""); // 绑定输入框的内容
			const emojis = ref([
				"😊",
				"👍",
				"❤️",
				"😂",
				"😢",
				"😎",
				"😍",
				"🤗",
				"😭",
				"😡",
				"👍",
				"👌",
				"👏",
				"💪",
				"🙏",
				"🤝",
				"👍",
				"👌",
				"👏",
				"💪",
				"🙏",
				"🤝",
			]); // 表情列表

			// 切换表情选择器的显示状态
			const toggleEmojiPicker = () => {
				isEmojiPickerActive.value = !isEmojiPickerActive.value;
			};
			
			// 选择表情并插入到输入框
			const selectEmoji = (emoji) => {
				commentText.value += emoji; // 将表情追加到输入框内容中
				isEmojiPickerActive.value = false; // 关闭表情选择器
			};



			// 显示 comment-input-bar1 和 option-bar1，隐藏 comment-bar
			const showCommentBar1 = () => {
				isCommentBarActive.value = true;
			};
			
			// 发送评论的逻辑
			const sendComment = () => {
				console.log("发送评论逻辑");
				// 清空输入框
				// this.$refs.commentInput1.value = '';
				// 隐藏 comment-input-bar1 和 option-bar1，显示 comment-bar
				isCommentBarActive.value = false;

				console.log("发送评论：", commentText.value);
				commentText.value = ""; // 清空输入框
				isEmojiPickerActive.value = false; // 关闭表情选择器
			};

			// 提及用户
			const mentionUser = () => {
				console.log("提及用户");
			};

			// 插入表情
			const insertEmoji = () => {
				console.log("插入表情");
			};

			return {
				isCommentBarActive,
				showCommentBar1,
				sendComment,
				mentionUser,
				insertEmoji,
				isEmojiPickerActive,
				commentText,
				emojis,
				toggleEmojiPicker,
				selectEmoji,
				mentionUser,
			};
		},
		data() {
			return {
				isExpanded: false,
				images: [
					'/static/1.png',
					'/static/1.png',
					'/static/1.png'
				],
				avatars: [
					'/static/5.svg',
					'/static/6.svg',
					'/static/7.svg',
					'/static/8.svg',
					'/static/9.svg',
					'/static/10.svg'
				],
				emojis: [
					'😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '😊', '😇', '🥰',
					'😍', '🤩', '😘', '😗', '😚', '😙', '😋', '😛', '😜', '🤪',
					'😝', '🤑', '🤗', '🤭', '🤫', '🤔', '🤐', '😐', '😑', '😶',
					'😏', '😒', '🙄', '😬', '😮', '😯', '😲', '😳', '😱', '😖',
					'😟', '😞', '😕', '🙁', '😌', '😔', '😪', '🤤', '😴', '😷',
					'🤒', '🤕', '🤢', '🤮', '🤧', '😵', '😡', '😠', '🤬', '😷',
					'🤐', '🤫', '🤭', '🙊', '🙉', '🙈', '🐵', '🐒', '🦍', '🐶',
					// Add more emojis as needed
				]
			};
		},
		methods: {
			toggleExpand() {
				this.isExpanded = !this.isExpanded;
			},
			selectComment(comment) {
				// 选择评论的逻辑
				console.log('选中的评论：', comment);
			},
			back(){
				uni.navigateBack({
					data:1
				})
			},
			// 聊天框
			sendComment() {
				// 获取输入框内容并发送的逻辑
				const comment = this.$refs.commentInput.value;
				console.log('发送的评论：', comment);
				// 清空输入框
				this.$refs.commentInput.value = '';
			},
			// 公开昵称
			mentionUser() {
				// 提示用户可以@某人的逻辑
				console.log('提及用户');
			},
			insertEmoji() {
				// 插入表情的逻辑
				console.log('插入表情');
			},
			selectEmoji(emoji) {
				// Handle emoji selection
				console.log('Selected emoji:', emoji);
				// You can add logic here to insert the emoji into a text input field or message
			},
			goBack(){
				uni.navigateTo({
					url:"/pagesB/jingdian/index"
				})
			}
			
		}
	};
</script>

<style>
	::-webkit-scrollbar {
		display: none;
	}

	.container {
		background: white;
	}

	/* 标题导航 */
	.profile-container {
		padding: 8px 20px;
	}

	.profile-header {
		display: flex;
		align-items: center;
	}

	.profile-back {
		font-size: 24px;
		margin-right: 10px;
	}

	.profile-avatar {
		margin-left: 55px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.profile-name {
		margin-left: -5px;
		font-size: 15px;
		font-weight: bold;
	}

	.profile-message {
		height: 30px;
		margin-left: auto;
		background-color: #f0f0f0;
		border: 1px solid #ccc;
		border-radius: 30px;
		font-size: 10px;
		margin-right: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 轮播图 */
	.swiper-container {
		width: 100%;
		height: 100%;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	/* 定位 */
	.location-container {
		margin-left: 20px;
		margin-top: 10px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		padding: 2px 10px;
		border-radius: 15px;
		background: #f2f2f2;
		width: 120px;
	}

	.location-item {
		display: flex;
		align-items: center;
	}

	.icon {
		font-size: 24px;
		margin-right: 5px;
	}

	.location-text {
		font-size: 13px;
		color: #333;
		margin-right: 5px;
	}

	.locationTb {
		margin-left: -10px;
		margin-right: 10px;
		background: #333333;
		padding: 2.5px 5px;
		border-radius: 20px;
		color: #fff;
	}

	/* 标题 */
	.title {
		margin-left: 20px;
		text-align: center;
		font-size: 19px;
		font-weight: bold;
	}

	.diDu {
		margin-top: 10px;
	}

	.gaoNeng {
		margin-top: -10px;
	}

	.zhanKai {
		border: 0px solid white;
		background: none;
		color: #3478f6;
		margin-left: 60px;
		font-size: 12px;
		margin-top: -10px;
		border: 0;
	}

	/* 文字 */
	p {
		margin-left: 20px;
	}

	/* 介绍 */
	.jieShao {
		margin-top: 10px;
		display: flex;
	}

	.jieShao button {
		color: deepskyblue;
		font-size: 10px;
		border: none;
	}

	.p1 {
		font-size: 10px;
		color: #ccc;
	}

	/* 图文混排 */
	.tuWen {
		margin: 5px;
		border: 1px solid #ccc;
		padding: 5px;
		height: 120px;
	}

	.attraction {
		padding: 5px 10px;
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.attraction-image {
		width: 100px;
		height: 100px;
		margin-right: 20px;
	}

	.attraction-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
	}

	.attraction-name {
		font-size: 15px;
		font-weight: bold;
	}

	.attraction-level {
		margin-top: 3px;
		padding: 1px 2px;
		width: 15px;
		font-size: 10px;
		color: #888;
		background: #cccccc;
	}

	.attraction-score {
		margin: 2px;
		color: #333;
		display: flex;
	}

	.pf {
		color: #3478f6;
		font-size: 16px;
	}

	.attraction-address {
		color: #666;
	}

	.view-button1 {
		background: linear-gradient(to right, #327bf6, #91d9f9);
		color: white;
		padding: 2px 10px;
		border-radius: 5px;
		margin-top: 10px;
		font-size: 10px;
		position: absolute;
		top: -15px;
		right: -40px;
	}

	.view-button2 {
		background: linear-gradient(to right, #327bf6, #91d9f9);
		color: white;
		padding: 2px 10px;
		border-radius: 5px;
		margin-top: 10px;
		font-size: 10px;
		position: absolute;
		top: -15px;
		right: 10px;
	}

	/* 点赞 */
	.like-container {
		display: flex;
		align-items: center;
		padding: 10px;
	}

	.avatars {
		display: flex;
		flex-wrap: wrap;
	}

	.avatar-image {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: -10px;
		margin-bottom: 5px;
	}

	.likes {
		margin-left: 110px;
		display: flex;
		align-items: center;
		position: relative;
	}

	.like-icon {
		color: red;
		font-size: 24px;
		position: absolute;
		left: -15px;
	}

	.like-count {
		margin-left: 5px;
		font-size: 16px;
	}

	/* 评论列表 */
	.comment {
		display: flex;
		flex-direction: column;
		padding: 10px;
		border-bottom: 1px solid #eee;
	}

	.comment-header {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.info {
		display: flex;
		flex-direction: column;
	}

	.username {
		font-size: 16px;
		font-weight: bold;
	}

	.date {
		font-size: 12px;
		color: #888;
	}

	.comment-content {
		font-size: 14px;
		margin-left: 50px;
		color: #333;
	}

	.p2 {
		position: absolute;
		top: 955px;
		left: 280px;
	}

	.p3 {
		position: absolute;
		top: 1045px;
		left: 280px;
	}

	/* 聊天框布局 */
	.comment-bar {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 10px;
		border-bottom: 1px solid #eee;
	}

	.inputBox {
		display: flex;
		background: #f5f5f5;
		border-radius: 20px;
	}

	.comment-input {
		flex: 1;
		padding: 10px;
		border: 0px solid #eee;
		border-radius: 20px;
		margin-right: 10px;
		background: none;
	}

	.actions {
		display: flex;
		align-items: center;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 10px;
	}

	.iconfont {
		font-size: 20px;
		color: #888;
	}

	.iconfont:hover {
		color: #333;
	}

	text {
		font-size: 14px;
		color: #333;
	}

	.p4 {
		margin-left: 60px;
		margin-bottom: 10px;
		color: #007aff;
	}

	.zi {
		font-size: 10px;
	}

	.bi {
		margin-left: 5px;
		width: 30px;
		height: 30px;
		margin-top: 5px;
	}

	/* 聊天框 */
	.comment-input-bar1 {
		height: 100px;
		margin-top: 12px;
		display: flex;
		align-items: center;
		background: #fff;
		padding: 10px;
		border-top: 1px solid #eee;
		position: relative;
	}

	.inputBox1 {
		margin-top: -2px;
		width: 285px;
		height: 100px;
		border: 1px solid #ccc;
		padding: 1px;
		position: relative;
	}

	.comment-input1 {
		height: 30px;
		background: #fff;
		padding: 5px 10px;
		border-radius: 5px;
		margin-right: 10px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 68%;
		z-index: 1000;
	}

	.send-button1 {
		padding: 1px 4px;
		background-color: #ffffff;
		border: 1px solid #fff;
		border-radius: 5px;
		color: royalblue;
		cursor: pointer;
		font-size: 13px;
		position: absolute;
		left: 306px;
		top: 75px;
		width: 16%;
		z-index: 100;
	}

	.send-button:active1 {
		background-color: #e0e0e0;
	}

	/* 公开昵称 */
	.option-bar1 {
		display: flex;
		align-items: center;
		padding: 10px;
		background-color: #f5f5f5;
		/* display: none; */
	}

	.checkbox1 {
		margin-right: 10px;
	}

	.icons1 {
		display: flex;
		margin-left: auto;
	}

	.icon-button1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		margin-left: 10px;
		background-color: #ffffff;
		border-radius: 15px;
		cursor: pointer;
	}

	.iconfont1 {
		font-size: 16px;
		color: #888;
	}

	.iconfont:hover {
		color: #333;
	}

	/* 表情包 */
	.emoji-picker {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		padding: 10px;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.emoji-grid {
		display: grid;
		grid-template-columns: repeat(8, 40px);
		gap: 10px;
	}

	.emoji-item {
		font-size: 24px;
		text-align: center;
		cursor: pointer;
	}

	.emoji-item:hover {
		background-color: #f0f0f0;
		border-radius: 5px;
	}
</style>